<script lang="ts">
import type { GameDetail } from '~/api/services/main.api';
import { toPlayPage } from '~/pages/play/helpers';
import GameIcon from './GameIcon.vue';

export const allGamesPopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./AllGames.vue')),
  {
    title: 'All games',
    wrapClassName: 'ant-cover__Modal-drawer __screen-drawer',
    width: 800,
    centered: true,
    footer: null,
  },
);
</script>

<script setup lang="ts">
const props = defineProps<{
  games: GameDetail[];
}>();
const emits = defineEmits<{
  close: [];
}>();

function onClose() {
  emits('close');
  allGamesPopup?.close();
}
</script>

<template>
  <div class="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-1 text-base">
    <div
      v-for="game of props.games" :key="game.code"
      class="flex cursor-pointer items-center rounded-2 p-2 text-sys-text-body hover:text-sys-text-head"
      @click="toPlayPage(game)?.then(() => onClose())"
    >
      <GameIcon :icon="game.image_icon" class="mr-2 size-1.2em" />
      <span class="line-clamp-1">{{ game.name }}</span>
    </div>
  </div>
</template>
